import React, { ReactNode, useState } from 'react';
import { Container, Button, Anchor, Table, Collapse } from '@block/plug';
import { ParkerRichText } from '@src/components';
import { ReportPreview, ReportLevel, AuditProblemListType, BizOpType, OpLogData } from '../../type';
import './ReportPc.scss';

interface Props {
  reportData: ReportPreview;
  handleOpenAuditModel: () => void;
  handleOpenRiskModel: () => void;
  renderRiskLevel: (riskLevel: string, riskLevelName: string, tagStyle: boolean) => ReactNode;
  handleOpenFindingsDrawer: (row: AuditProblemListType) => void;
  getContainer: () => HTMLElement;
  handleMonitor: (bizOpType: BizOpType, params?: OpLogData) => void;
}

const { Header, Main } = Container;
const { Link } = Anchor;

/**
 * pc端 审计报告预览
 */

const ReportPc = (props: Props) => {
  const {
    reportData,
    handleOpenAuditModel,
    handleOpenRiskModel,
    renderRiskLevel,
    handleOpenFindingsDrawer,
    getContainer,
    handleMonitor,
  } = props;

  const { appendixList, auditProblemDetailList, problemAndProgressList } = reportData ?? {};
  const [appendixMonitor, setAppendixMonitor] = useState([]);

  /** 点击折叠卡片id */
  const handleAppendixListItemId = (value: string[]) => {
    if (value) {
      setAppendixMonitor(value);
      if (value?.length > appendixMonitor?.length) {
        handleMonitor(BizOpType.viewAppendix, { appendixId: value[value.length - 1] });
      }
    }
  };

  return (
    <div className="project-report-preview">
      <Header className="project-report-preview-header" height={130}>
        <div className="header-title">
          {reportData?.projectName ?? '-'}
          报告
          {reportData?.reportLevel && (
            <>{reportData?.reportLevel === ReportLevel.NO ? '' : `（报告等级${reportData?.reportLevelName}）`}</>
          )}
        </div>
        <div className="header-btns">
          <Button type="primary" shape="text" onClick={handleOpenAuditModel}>
            查看审计报告等级定义
          </Button>
          <Button type="primary" shape="text" onClick={handleOpenRiskModel}>
            查看风险等级定义
          </Button>
        </div>
      </Header>
      <Anchor className="preview-anchor" affix={false} getContainer={getContainer}>
        <Link href="#reportLevelName" title="审计结论" />
        <Link href="#auditProjectOverview" title="审计项目概述" />
        <Link href="#problemAndProgressList" title="重点审计发现及整改进度" />
        <Link href="#auditProblemDetailList" title="审计发现详述" />
        {appendixList?.length > 0 && <Link href="#appendixList" title="附录" />}
      </Anchor>
      <Main className="project-report-preview-content">
        <div id="reportLevelName" className="preview-module">
          <div className="preview-module-title">一、审计结论</div>
          <div className="preview-module-content">{reportData?.auditConclusion}</div>
        </div>
        <div id="auditProjectOverview" className="preview-module">
          <div className="preview-module-title">二、审计项目概述</div>
          <ParkerRichText value={reportData?.auditProjectOverview} mode="view" />
        </div>
        <div id="problemAndProgressList" className="preview-module">
          <div className="preview-module-title">三、重点审计发现及整改进度</div>
          <div className="preview-module-content">
            <Table useSticky bordered="cell" data={problemAndProgressList}>
              <Table.Column width="85" dataKey="businessProcess" render={(value) => value ?? '-'}>
                审计领域
              </Table.Column>
              <Table.Column width="190" dataKey="problemDesc" render={(value) => value ?? '-'}>
                问题简述
              </Table.Column>
              <Table.Column width="100" dataKey="efficiencySpace" render={(value) => value ?? '-'}>
                可提效空间
              </Table.Column>
              <Table.Column
                width="85"
                dataKey="riskLevel"
                render={(value: string, row) => renderRiskLevel(row?.riskLevel, row?.riskLevelName, true)}
              >
                风险等级
              </Table.Column>
              <Table.Column
                width="85"
                dataKey="problemTypeList"
                render={(value) => value?.map((problemItem: SelectOption) => <div>{problemItem?.name}</div>)}
              >
                问题分类
              </Table.Column>
              <Table.Column width="190" dataKey="businessFeedback" render={(value) => value ?? '-'}>
                业务反馈
              </Table.Column>
              <Table.Column width="190" dataKey="auditFollowUp" render={(value) => value ?? '-'}>
                审计跟进
              </Table.Column>
            </Table>
          </div>
        </div>
        <div id="auditProblemDetailList" className="preview-module">
          <div className="preview-module-title">四、审计发现详述</div>
          <div className="preview-module-content">
            {auditProblemDetailList?.map((item) => {
              const { businessProcess, auditProblemList } = item ?? {};
              return (
                <div className="findings-group">
                  <div className="findings-group-title">{businessProcess}</div>
                  {auditProblemList?.map((row) => {
                    const { indexCode, riskLevel, riskLevelName, title, problemId } = row ?? {};
                    return (
                      <div className="findings-item">
                        <div className="findings-item-num">审计发现{indexCode}：</div>
                        <div className="findings-item-level">{renderRiskLevel(riskLevel, riskLevelName, false)}</div>
                        <Button
                          type="primary"
                          shape="text"
                          className="findings-item-btn"
                          onClick={() => {
                            handleMonitor(BizOpType.viewAuditProblem, { problemId });
                            handleOpenFindingsDrawer(row);
                          }}
                        >
                          {title ?? '-'}
                        </Button>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
        {appendixList?.length > 0 && (
          <div id="appendixList" className="preview-module">
            <div className="preview-module-title">五、附录</div>
            <div className="preview-module-content">
              <Collapse type="simple" value={appendixMonitor} onChange={handleAppendixListItemId}>
                {appendixList?.map((appendix, index) => {
                  const { title, content, appendixId } = appendix ?? {};
                  return (
                    <Collapse.Item code={appendixId} key={appendixId} title={`附录${index + 1}：${title || '-'}`}>
                      <ParkerRichText value={content} mode="view" />
                    </Collapse.Item>
                  );
                })}
              </Collapse>
            </div>
          </div>
        )}
      </Main>
    </div>
  );
};
export default ReportPc;
